/**
 * 该组件用于附件列表展示
 */
import React, {PropTypes} from 'react'
import {Icon, Button} from 'antd'
import './cms.less'

class FileList extends React.Component {
  constructor(props) {
    super(props);
    this.deleteHandel = this.deleteHandel.bind(this);
    this.mediaPlay = this.mediaPlay.bind(this);
  }

  deleteHandel(index) {
    if (this.props.deleteHandel && typeof this.props.deleteHandel === 'function') {
      this.props.deleteHandel(index);
    } else {
      console.error('请设置FileList组件的deleteHandel属性。它的类型是：function，接受一个参数index');
    }
  }

  mediaPlay(e) {
    if (this.props.mediaPlay && typeof this.props.mediaPlay == 'function') {
      this.props.mediaPlay(e);
    } else {
      let icon = e.target;
      let cln = e.target.className;
      let a = icon.querySelector('audio');
      if (cln.match('anticon-play-circle-o')) {
        icon.setAttribute('class', 'anticon anticon-play-circle');
        a.pause();
        a.load();
      } else {
        icon.setAttribute('class', 'anticon anticon-play-circle-o');
        a.play();
      }
    }
  }

  render() {
    const self = this;
    const {isEditlist, list, fileInfo} = this.props;
    const fileTypeIcon = {
      'doc': {
        icon: ' corIcon corWord',
        color: '#2d7bfb'
      },
      'docx': {
        icon: ' corIcon corWord',
        color: '#2d7bfb'
      },
      'xls': {
        icon: ' corIcon corExcel',
        color: '#29aa5d'
      },
      'xlsx': {
        icon: ' corIcon corExcel',
        color: '#29aa5d'
      },
      'ppt': {
        icon: ' corIcon corPPT',
        color: '#f99430'
      },
      'pptx': {
        icon: ' corIcon corPPT',
        color: '#f99430'
      },
      'pdf': {
        icon: ' corIcon corPDF',
        color: '#d34040'
      },
      'undefined': {
        icon: ' corIcon corUnknowFile',
        color: 'gray'
      },
      'audio': {
        icon: 'play-circle',
        color: '#f56a00'
      }
    }

    /**
     *
     * @param item
     * @returns {XML}
     * {
     *    type:{
     *      dataIndex: 'word',
     *      render: 'word',
     *    },
     *    size:'11Kb',
     *    name:'test',
     *    time:'',
     * }
     */

    return <ul className="fileList">
      {list.map(function (item, key) {
        return (
          <li key={key}>
            <div className="fileItem">
              <div className="fileIcon">
                {fileInfo.iconType.render ?
                  (
                    fileInfo.iconType.render(item[fileInfo.iconType.dataIndex]) == 'audio' ?
                      <Icon
                        type={fileTypeIcon[fileInfo.iconType.render(item[fileInfo.iconType.dataIndex])]['icon']}
                        style={{color: `${fileTypeIcon[fileInfo.iconType.render(item[fileInfo.iconType.dataIndex])]['color']}`}}
                        onClick={self.mediaPlay}
                      >
                        <audio src={item[fileInfo.url && fileInfo.url.dataIndex]}/>
                      </Icon>
                      : (
                        fileInfo.iconType.render(item[fileInfo.iconType.dataIndex]).match(/jpg|png|bmp|gif|jpeg/) ?
                          <a target="_blank" href={item[fileInfo.url && fileInfo.url.dataIndex]}>
                            <img src={item[fileInfo.url && fileInfo.url.dataIndex]} style={{width:'42px', height:'42px', border:'0px'}}/>
                          </a> :
                          <a target="_blank" href={item[fileInfo.url && fileInfo.url.dataIndex]}>
                            <Icon
                              type={fileTypeIcon[fileInfo.iconType.render(item[fileInfo.iconType.dataIndex])]['icon']}
                              style={{color: `${fileTypeIcon[fileInfo.iconType.render(item[fileInfo.iconType.dataIndex])]['color']}`}}/>
                          </a>
                      )
                  ) :
                  (
                    item[fileInfo.iconType.dataIndex].match(/jpg|png|bmp|gif|jpeg/) ?
                      <a target="_blank" href={item[fileInfo.url && fileInfo.url.dataIndex]}>
                        <img src={item[fileInfo.url && fileInfo.url.dataIndex]} style={{width:'42px', border:'0px'}}/>
                      </a> : <Icon type={fileTypeIcon[item[fileInfo.iconType.dataIndex]]['icon']}
                                   style={{color: `${fileTypeIcon[item[fileInfo.iconType.dataIndex]]['color']}`}}/>
                  )
                }
              </div>
              {
                fileInfo.iconType.render(item[fileInfo.iconType.dataIndex]) == 'audio' ?
                  <p><a target="_blank" href='javascript:void(0);'>{item[fileInfo.name.dataIndex]}</a></p>
                  :
                  <p><a target="_blank"
                        href={item[fileInfo.url && fileInfo.url.dataIndex] || 'javascript:void(0);'}>{item[fileInfo.name.dataIndex]}</a>
                  </p>
              }
              <p>
                <span style={{float: 'left'}}>
                {fileInfo.size.render ? fileInfo.size.render(item[fileInfo.size.dataIndex]) : item[fileInfo.name.dataIndex]}&nbsp;&nbsp;
                  {fileInfo.fileType.render ? fileInfo.fileType.render(item[fileInfo.fileType.dataIndex]) : item[fileInfo.fileType.dataIndex]}
                </span>
                {
                  isEditlist ?
                    '' :
                    <span style={{float: 'right'}}>
                      {fileInfo.time.render ? fileInfo.time.render(item[fileInfo.time.dataIndex]) : item[fileInfo.time.dataIndex]}
                    </span>
                }
              </p>
              {
                isEditlist ?
                  <div className="fileBtnBox">
                    <Button type="danger" icon="close" size="large"
                            onClick={ self.deleteHandel.bind(self, key) }>删除</Button>
                  </div> : ''
              }
            </div>
          </li>
        )
      })}
    </ul>
  }
}

FileList.propTypes = {
  list: PropTypes.array.isRequired,
  fileInfo: PropTypes.shape({
    iconType: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
    name: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
    url: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
    size: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
    time: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
    fileType: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    })
  }).isRequired,
  mediaPlay: PropTypes.func,//可以覆写组件的mediaPlay方法
  isEditlist: PropTypes.bool,
  deleteHandel: function (props, propName, componentName) {
    if (!props['isEditlist']) return;
    if (!/matchme/.test(props[propName])) {
      if (typeof props[propName] !== 'function')
        return new Error(
          'Invalid prop `' + propName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
    }
  },
};
export default FileList
